<template>
  <div class="media-tags" style="margin-top: 20px;text-align: center;max-width: 1200px;margin: auto;">
    <div class="skc-home-tags">



      <el-tag v-for="tag in knowTags" :key="tag.tagkey" :type="farmKnowViewUtils.getTagType(tag.type!)" size="large"
        @click="doSearch('T:|' + tag.tagkey + '|' + tag.name)" round>
        <el-icon v-if="farmKnowViewUtils.getTagType(tag.type!) == 'danger'">
          <HomeFilled />
        </el-icon>
        <el-icon v-if="farmKnowViewUtils.getTagType(tag.type!) == 'primary'">
          <Search />
        </el-icon> {{ tag.name }}
        <span style="color: brown;" v-if="tag.knowNum && tag.knowNum > 0 && farmKnowViewUtils.getTagType(tag.type!) == 'danger'" class="num"> {{
          tag.knowNum }}</span>
        <span v-if="tag.knowNum && tag.knowNum > 0 && farmKnowViewUtils.getTagType(tag.type!) == 'primary'" class="num"> {{
          tag.knowNum }}</span>
      </el-tag>




    </div>
  </div>
</template>
<script setup lang="ts">
import { RequestTypeEnum } from '@/types/commons/RequestTypeEnum';
import Farm2Request from '@/service/remoteRequests/Farm2Request';
import type { DataResponse } from '@/types/commons/DataResponse';
import notice from '@/components/msg/FarmNotice';
import type { SkcTag } from '@/types/knows/SkcTag';
import farmKnowViewUtils from '@/hook/farmKnowViewUtils'
import { onMounted, reactive } from 'vue';
const knowTags = reactive([]) as Array<SkcTag>;

const props = defineProps({
  doSearchHandle: {
    type: Function,
    required: true
  }
});

const doSearch = (theWord: string) => {
  props.doSearchHandle({ word: theWord, page: 1 });
}

const loadTags = () => {
  Farm2Request.submit('api/wtag/my', RequestTypeEnum.post, null).then((response: DataResponse) => {
    Object.assign(knowTags, response.data);
  }).catch((msg: string) => {
    notice.byError(msg);
  });
}

onMounted(() => { loadTags(); });

</script>
<style>
.media-tags .el-tag__content {
  display: flex;
  align-items: center;

  /* 实现垂直居中 */
  img {
    margin-right: 4px;
    width: 22px;
    height: 22px;
    padding: 0px;
  }
}

.media-tags .el-tag {
  padding-left: 12px;
  padding-right: 12px;
}

.media-tags .el-tag:hover {
  border: 1px dotted #999999;
  opacity: 0.6;
  /* 透明度为 30% */
  cursor: pointer;
}
</style>
<style scoped>
/* 样式可以根据需要添加 */


.skc-home-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin-right: 50px;
  margin-left: 50px;
}

.skc-home-tags .el-tag {
  margin: 8px;
  margin-left: 20px;
  margin-right: 20px;
}

.skc-home-tags .el-tag .num {
  color: var(--el-menu-active-color);
  margin-left: 4px;
}
</style>
